
<template>
    <div class="countryMain">
        <header>
            <van-nav-bar title="标题" left-text="返回" left-arrow :border="false">
                <template #left>
                    <van-icon name="arrow-left" size="18px" color="black" @click="$router.back()" />
                </template>
                <template #title>
                    选择国家或地区
                </template>
            </van-nav-bar>
        </header>
        <section>
            <van-index-bar :index-list="Object.keys(country_codes)">
                <div v-for="items, index in country_codes" :key="index">
                    <van-index-anchor v-if="country_codes[index].length" :index="index"/>
                    <!-- items => [{中国:"86"}] -->
                    <template  v-for="item in items">
                    <!-- item => {中国:"86"} -->
                        <van-cell v-for="val, num in item" :key="num" :to="{ name: $route.params.back, params: {phoid: val, phoName: num} }" @click="check" size="large">
                            <span >{{num}}</span>
                            <span >+{{val}}</span>
                        </van-cell>
                    </template>
                </div>
            </van-index-bar>
        </section>
    </div>
</template>
<style lang="stylus" scoped>
.countryMain
    overflow auto
    display flex
    flex-direction column
    header
        z-index 10
    section
        flex 1
        overflow auto
.van-index-anchor
    background-color rgb(245,245,245)
    height 2.5rem
    font-size 1rem
    line-height 2.5rem
    color rgb(153,153,153)
.van-cell
    font-size 1.125rem
    .van-cell__value--alone
        display flex
        justify-content space-between
        padding-right .9375rem
        span:nth-child(2)
            font-size .875rem
            color rgb(153,153,153)
.van-cell::after
    border-bottom 1px solid rgb(153,153,153)
</style>
<script>
import Vue from 'vue'
import { IndexBar, IndexAnchor, NavBar, Icon, Cell } from 'vant'
Vue.use(IndexBar)
Vue.use(IndexAnchor)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Cell)
export default {
  data () {
    return {
      country_codes: {
        '*': [
          {
            中国: '86'
          },
          {
            中国香港: '852'
          },
          {
            中国澳门: '853'
          },
          {
            中国台湾: '886'
          },
          {
            新加坡: '65'
          },
          {
            马来西亚: '60'
          },
          {
            美国: '1'
          },
          {
            澳大利亚: '61'
          },
          {
            加拿大: '1'
          },
          {
            新西兰: '64'
          },
          {
            日本: '81'
          },
          {
            韩国: '82'
          }
        ],
        A: [
          {
            阿联酋: '971'
          },
          {
            澳大利亚: '61'
          }
        ],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [
          {
            菲律宾: '63'
          }
        ],
        G: [],
        H: [
          {
            韩国: '82'
          }
        ],
        I: [],
        J: [
          {
            加拿大: '1'
          }
        ],
        K: [],
        L: [
          {
            老挝: '856'
          }
        ],
        M: [
          {
            马来西亚: '60'
          },
          {
            美国: '1'
          },
          {
            墨西哥: '52'
          }
        ],
        N: [],
        O: [],
        P: [],
        Q: [],
        R: [
          {
            日本: '81'
          }
        ],
        S: [
          {
            沙特阿拉伯: '966'
          }
        ],
        T: [
          {
            泰国: '66'
          }
        ],
        U: [],
        V: [],
        W: [
          {
            文莱: '673'
          }
        ],
        X: [
          {
            新加坡: '65'
          },
          {
            新西兰: '64'
          }
        ],
        Y: [
          {
            印度尼西亚: '62'
          },
          {
            英国: '44'
          },
          {
            越南: '84'
          }
        ],
        Z: [
          {
            中国: '86'
          },
          {
            中国澳门: '853'
          },
          {
            中国台湾: '886'
          },
          {
            中国香港: '852'
          }
        ]
      }
    }
  },
  methods: {
    check () {
      console.log(this.$route.params)
    }
  }
}
</script>
